 <%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/meta.jsp" %>
<title>VTC - Holistic category - HPP</title>
<%@ include file="/common/css_js.jsp"%>
 <script type="text/javascript">
 function selectCard(card){
		var nodeId = document.getElementById("categoryNodeId").value;
		var type = document.getElementById("categoryNodeType").value;
		var categoryId = document.getElementById("categoryId").value;
		var treeType = document.getElementById("treeType").value;
		if(nodeId==null || nodeId==""){
			document.getElementById("errorMessage").innerHTML="Please fill in Category Node Info first!";
			return;
		}
		if(card=='node_card'){
			if(type=="Root")
				window.top.catForm.location="categoryNode!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
			else if(type=="Branch")
				window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
			else
				window.top.catForm.location="categoryLeaf!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}else if(card=='att_card'){
			window.top.catForm.location="categoryProgrammeAttribute!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}else if(card=='owner_card'){
			window.top.catForm.location="categoryOwner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}else if(card=='planner_card'){
			window.top.catForm.location="categoryPlanner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		}
	}
function savePlanner() {
	$("#categoryPlannerForm").attr('action',
			'categoryPlanner!save.action?no-decorate=0')
	$("#categoryPlannerForm").submit();
}

function selectAllPlanner(){
	var cb=document.getElementById("selectAll").checked;
	if(cb==true){
		var cbRoleCodes=document.getElementsByName("roleCodes");
		for(i=0;i<cbRoleCodes.length;i++){
			cbRoleCodes[i].checked=true;
		}
	}else{
		var cbRoleCodes=document.getElementsByName("roleCodes");
		for(i=0;i<cbRoleCodes.length;i++){
			cbRoleCodes[i].checked=false;
		}
	}
}
</script>
<body>
	<div class="bodyBlank">
		<div class="wTab">
			<table id="wMu" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td class="item1" id="itemA"><a href="javascript:selectCard('node_card');">Category
							Info.</a>
					</td>
					<s:if test="%{categoryNodeType=='Leaf'}">
					<td class="item1" id="itemB"><a
						href="javascript:selectCard('att_card');">Programme Groups</a>
					</td>
					</s:if>
					<s:if test="%{treeType=='Root'}">
						<td class="item1" id="itemC"><a
							href="javascript:selectCard('owner_card');">Owner</a>
						</td>
					</s:if>
					<s:if test="%{treeType!='Root'}">
					<td class="item1" id="itemD"><a
						href="javascript:selectCard('planner_card');">Planner</a>
					</td>
					</s:if>
				</tr>
			</table>
		</div>
		<script>
			selectTab("wMu", "itemD");
		</script>
 <div class="sListBorder" >
   <div class="sList" >
   <s:form name="categoryPlannerForm" id="categoryPlannerForm" method="post">
   <s:hidden name="categoryNodeId" id="categoryNodeId" value="%{categoryNodeId}"></s:hidden>
    	<s:hidden name="categoryNodeType" id="categoryNodeType" value="%{categoryNodeType}"></s:hidden>
    	<s:hidden name="treeType" id="treeType" value="%{treeType}"/>
    	<s:hidden id="categoryId" name="categoryId" value="%{categoryId}"></s:hidden>
     <table width="100%" class="sTable" cellpadding="0" cellspacing="0" border="0" >
       <tr>
          <td class="sTh checkbox" >
          	<input class="inputCheckbox" type="checkbox" id="selectAll" name="" onclick="selectAllPlanner()"/>
          </td>
          <td class="sTh" >Role </td>
        </tr>
        
         <s:iterator value="roles" var="roleVar">
       <tr class="sRow2" >
       <td class="sTh checkbox" >
       <s:checkbox name="roleCodes" value="plannerMap[#roleVar.id.roleCode]!=null?1:0" fieldValue="%{#roleVar.id.roleCode}"></s:checkbox>
       </td>
       <td class="sCell" >
       <a href="#" onclick="window.top.popup(event, 'categoryOwner!turnToViewUserPage.action?no-decorate=0&roleCode=<s:property value="#roleVar.id.roleCode"/>', 'width:400;height:500');">
										<s:property value="#roleVar.id.roleCode" />
		</a>
		</td>
       </tr>
       </s:iterator>
     </table>
     </s:form>
   </div>
   <div class="btnSet btnSetTypeA">
     <div class="left" >
       <div class="button" >
         <div class="left" >
           <div class="right" >
           <security:authorize  access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
             <input class="inputButton" type="button" id="savePlannerButton" name="" value="Save" onclick="savePlanner()"/>
             </security:authorize>
           </div>
         </div>
       </div>
     </div>
   </div>
   <script type="text/javascript">
				function disabledCheckbox(){
					var editEnable = "<s:property value='editEnable'/>";
					if(editEnable=="true"){
						document.getElementById("savePlannerButton").disabled="";
						document.getElementById("selectAll").disabled="";
						var list = document.getElementsByName("roleCodes");
						if(list==null)
							return;
						for(var i=0; i<list.length; i++){
							[i].disabled="";
						}
					}else{
						document.getElementById("savePlannerButton").disabled="disabled";
						document.getElementById("selectAll").disabled="disabled";
						var list = document.getElementsByName("roleCodes");
						if(list==null)
							return;
						for(var i=0; i<list.length; i++){
							list[i].disabled="disabled";
						}
					}
				}
				disabledCheckbox();
				
				function checkLevel1Endorsed(){
					var type = document.getElementById("categoryNodeType").value;
					var categoryId = document.getElementById("categoryId").value;
					$.ajax({
						url : "category!checkLevel1Endorsed.action?no-decorate=0&categoryId="+categoryId,
						cache : true,
						dataType : "text",
						async : false,
						success : function(data) {
							if(data=="true"){
								if(type="Root"){
									$("input[type='button']").attr("disabled", "true");
								}
							}
						},
						error : function(data) {
						}
					});
				}
				checkLevel1Endorsed();
			</script>
 </div>
 </div>
 </body>
 </html>